<div id="profileEdit" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="" role="tabpanel" data-example-id="togglable-tabs">
				<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true"
							>User Info</a
						>
					</li>
					<li role="presentation" class="">
						<a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false"
							>User password</a
						>
					</li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div role="tabpanel" class="tab-pane active" id="tab_content1" aria-labelledby="home-tab">
						<div class="modal-body">
							<form class="form-horizontal form-label-left" action="javasript:void(0);">
								<div class="item form-group">
									<label class="col-form-label col-md-3 col-sm-3 label-align"
										>User Name <span class="required">*</span>
									</label>
									<div class="col-md-6 col-sm-6">
										<input
											type="text"
											v-model="user.userName"
											class="form-control"
											placeholder="User Name"
											required=""
										/>
									</div>
								</div>
								<div class="item form-group">
									<label class="col-form-label col-md-3 col-sm-3 label-align"
										>User Email <span class="required">*</span>
									</label>
									<div class="col-md-6 col-sm-6">
										<input
											type="text"
											v-model="user.email"
											class="form-control"
											placeholder="User Email"
											required=""
										/>
									</div>
								</div>
								<div class="item form-group">
									<label class="col-form-label col-md-3 col-sm-3 label-align"
										>Image Type<span class="required">*</span>
									</label>
									<div class="col-md-6 col-sm-6">
										<select
											name="imageTypes"
											class="form-control"
											v-model="user.imageType"
											@change="refreshFileInput()"
										>
											<option
												v-for="(imageType, index) in imageTypes"
												:value="imageType.name"
												:size="imageType.size"
												:length="imageType.length"
												:height="imageType.height"
											>
												{{imageType.name}}
											</option>
										</select>
									</div>
								</div>
								<div class="item form-group">
									<label class="col-form-label col-md-3 col-sm-3 label-align"
										>User Image <span class="required">*</span>
									</label>
									<div class="col-md-6 col-sm-6">
										<input type="hidden" v-model="user.userImage" />
										<input id="uploadImage" name="file" type="file" multiple="true" />
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
							<button type="button" @click="updateModel()" class="btn btn-primary">Save changes</button>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
						<div class="modal-body">
							<form class="form-horizontal form-label-left" action="javasript:void(0);">
								<div class="item form-group">
									<label class="col-form-label col-md-3 col-sm-3 label-align"
										>Role Name <span class="required">*</span>
									</label>
									<div class="col-md-6 col-sm-6">
										<input type="text" class="form-control" placeholder="Role Name" required="" />
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
							<button type="button" @click="updateModel_1()" class="btn btn-primary">Save changes</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
